<template>
  <div class="container"  >
    <Header
      title="社会组织评估申报平台"
      background="#fff"
      :back="true"
    ></Header>
    <div class="table-page-search-wrapper">
      <a-card :bordered="false">
        
        <div class="title">
          <div>{{ detail.organizationName }}<span>{{ detail.socialOrganizationType }}</span></div>
          <!-- <a-button class="preview-btn" type="primary" @click="handlePreview">文件预览</a-button> -->
        </div>

        <div class="info">
          <div class="info_left">
            <div>创建人：{{ detail.createUserName }}</div>
            <div>创建时间：{{ detail.createTime }}</div>
            <div>
              <span>合并文件：</span>
              <span class="info_left_upload" @click="handleUpload"
                >下载并合并文件</span
              >
              <span>提示:所有材料上传无误后，再进行下载</span>
            </div>
          </div>
          <div class="info_right">
            <div style="display: flex; align-items: center">
              <span style="margin-right: 20px">填报进度</span
              ><a-slider
                id="test"
                :value="
                  (detail.recordCount / detail.managementCount) * 100 || 0
                "
                :disabled="true"
                style="flex: 1"
              />
            </div>
            <div class="info_right_score_container">
              <div class="info_right_score">
                <span>{{ detail.recordSelfScoreSum }}</span>
                <span>自评得分</span>
              </div>
              <div class="info_right_score">
                <span>{{ detail.passMark }}</span>
                <span>及格分数</span>
              </div>
              <div class="info_right_score">
                <span>{{ detail.declarationlevel }}</span>
                <span>申请级别</span>
              </div>
              <div class="info_right_score" style="margin: 0;">
                <span
                  ><span style="color: #0084fe">{{
                    detail.recordScoreZhidaoSum || 0
                  }}</span></span
                >
                <span>指导得分</span>
              </div>
            </div>
          </div>
        </div>

      </a-card>
      <div class="content-box">

        <!-- 左边树 -->
        <div class="left-tree custom-tree">
          <a-input-search
            style="margin: 15px;width: 90%;"
            v-model="filterText"
            allowClear
            placeholder="请输入"
          >
          </a-input-search>
          <div ref="treeBoxRef" style="padding: 15px;flex: 1;overflow: auto;border-top: 1px solid #efefef;">
            <el-tree
              ref="treeRef"
              node-key="id"
              highlight-current
              default-expand-all
              :expand-on-click-node="false"
              :data="orgTree"
              :props="elTreeProps"
              :filter-node-method="filterNode1"
              @node-click="confirmSelect"
            >
              <div slot-scope="{ data }" class="treeItem">
                <span :class="data.cj == 4 ? '': 'text-gray'" :id="'elTreeId' + data.id">{{ data.target }}</span>
              </div>
            </el-tree>
          </div>
          <div class="spinBox" v-if="treeSpinning"><a-spin /></div>
          <!--
          <a-tree
            v-if="showTree"
            ref="treeRef"
            key="id"
            :tree-data="orgTree"
            :auto-expand-parent="autoExpandParent"
            default-expand-all
            :defaultSelectedKeys="defaultSelectedKeys"
            @select="confirmSelect"
          >
            <template slot="title" slot-scope="{ title }">
              <span>{{ title }}</span>
            </template>
          </a-tree> -->
        </div>

        <!-- 右边指标 -->
        <div class="content">
          <div class="status_container">
            <div class="status">
              <div>填报状态</div>
              <div class="status_list">
                <div
                  v-for="(item, index) in statusList"
                  :key="index"
                  :class="current == index ? 'active_status' : ''"
                  @click="handleChange(item, index)"
                >
                  {{ item }}
                  <img
                    src="@/assets/right.png"
                    alt=""
                    v-if="current == index"
                  />
                </div>
              </div>
            </div>
            <div class="status">
              <div>审核状态</div>
              <div class="status_list">
                <div
                  v-for="(item, index) in auditList"
                  :key="index"
                  :class="current1 == index ? 'active_status' : ''"
                  @click="handleChange1(item, index)"
                >
                  {{ item }}
                  <img
                    src="@/assets/right.png"
                    alt=""
                    v-if="current1 == index"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="audit_list">
            <div
              class="index-item"
              v-for="(item, index) in dataListCopy"
              :key="index"
              @click="toWrite(item)"
            >
              <div class="status">
                <div class="tbzt" :class="item.submitStatus === 1 ? 'no' : 'yes'">
                  填报状态：
                  <span>{{ item.submitStatus === 2 ? '已填报' : '未填报' }}</span>
                </div>
                <!-- <img src="@/assets/yitianxie.png" alt="" />
                <div style="color: #fff; font-size: 14px">
                  填报状态：{{ item.submitStatus == 2 ? "已填报" : "未填报" }}
                </div> -->
              </div>
              <!-- 有扣分 -->
              <div v-if="item.expertDeduction == 1" class="points">有扣分</div>
              <div style="width: 100px">{{ item.target }}</div>
              <div class="item">
                <span>总分</span><span>{{ item.totalPoint || 0 }}</span>
              </div>
              <div class="item">
                <span>自评得分</span><span>{{ item.selfScore || 0 }}</span>
              </div>
              <div class="item">
                <span>指导得分</span><span>{{ item.scoreZhidao || 0 }}</span>
              </div>
              <img
                class="approve_reject"
                src="@/assets/no_audit.png"
                alt=""
                v-if="!item.scoreZhidao && item.targetDeclarationRecordId"
              />
              <img
                class="approve_reject"
                src="@/assets/yishenhe.png"
                alt=""
                v-else-if="item.scoreZhidao"
              />
              <div class="write" v-if="item.submitStatus == 1">
                <a-button type="primary" @click="visible = true"
                  >填写申报</a-button
                >
              </div>
            </div>
            <div v-if="indexLoading" class="spinBox"><a-spin /></div>
          </div>
          <div class="no_data" v-if="!indexLoading && dataListCopy.length == 0">暂无数据</div>
        </div>
      </div>
    </div>

    <!-- 指标详情 -->
    <write-model
      ref="writeModel"
      :visible="visible"
      :loading.sync="confirmLoading"
      @cancel="handleCancel"
      @ok="handleOk"
      :status="status"
    ></write-model>


    <a-modal
      :visible="uploadVisible"
      title="下载"
      :body-style="{ padding: '24px 40px 10px' }"
      okText="导出"
      @ok="getAllFile"
      @cancel="uploadVisible = false"
    >
      <!-- <a-input-search
        style="margin-bottom: 20px"
        class="search"
        v-model="searchTarget"
        allowClear
        placeholder="搜索指标"
        @search="changeTarget"
        enter-button="搜索"
      >
      </a-input-search> -->
      <el-input
        placeholder="搜索指标"
        v-model="searchTarget"
        clearable
        @clear="handleSearch"
        ><el-button slot="append" :disabled="confirmLoading" @click="handleSearch">搜索</el-button>
      </el-input>
      <!-- v-loading="confirmLoading" -->
      <a-form-model ref="form" :model="form" layout="vertical">
        <a-form-model-item
          label="请勾选要导出的指标:"
          required
          style="margin-top: 8px"
        >
          <div class="tree_container">
            <!-- <a-tree
              v-model:checkedKeys="checkedKeys"
              v-if="targetTree && targetTree.length"
              :tree-data="targetTree"
              defaultExpandAll
              checkable
            >
              <template slot="title" slot-scope="{ title }">
                <span>{{ title }}</span>
              </template>
            </a-tree> -->

            <a-spin :spinning="treeLoading">
              <el-tree
                class="filter-tree"
                show-checkbox
                :data="targetTree"
                :props="defaultProps"
                node-key="key"
                default-expand-all
                :filter-node-method="filterNode"
                ref="tree"
              >
              </el-tree>
            </a-spin>
          </div>
        </a-form-model-item>
      </a-form-model>
      <div style="color: #666">
        <a-icon type="info-circle" style="color: #faad14" />
        勾选的指标及内容将被导出,未勾选的不会导出
      </div>
    </a-modal>
    <!-- 文件预览 -->
    <a-modal
      title="word预览"
      :width="1000"
      :visible="previewVisible"
      :footer="null"
      @cancel="
        () => {
          previewVisible = false;
        }
      "
    >
      <div class="docx_container">
        <div class="home">
          <div ref="file"></div>
        </div>
        <div v-if="previewLoading" class="spinBox">
          <a-spin></a-spin>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import Header from "@/components/header";
import WriteModel from "./writeModel";
const docx = require("docx-preview");
import {
  getTree,
  getDeclarationInfoDetail,
  getTargetDeclarationRecordList,
  submitDeclare,
  getTargetDeclarationRecordDetail,
  editDeclare,
  getTargetManagement,
  getFiles,
  getFilesBefore,
  getAllFile,
  updateStatus,
  previewFile,
  getTaskFileStatus
} from "@/api/apply";
import axios from "axios";
import { fileApi } from '@/config'
export default {
  components: {
    WriteModel,
    Header,
  },
  data() {
    return {
      showTree: false, // 是否显示树防止数据为空时不展开节点(树节点不显示的问题)
      defaultSelectedKeys: [], // 默认高亮的节点
      showBtn: true, // 显示操作按钮
      status: "", // 审核状态列表 1 未审核 2 已审核 // 控制弹窗是否显示下方确定 取消按钮
      current: 0, // 填报状态样式
      current1: 0, // 审核状态样式
      searchValue: "", // 搜索关键字
      autoExpandParent: true, // 父节点是否展开
      treeSpinning: false,
      indexLoading: false,
      dataList: [], // 指标数据
      dataListCopy: [], // 指标数据
      statusList: ["全部", "未填报", "已填报"], // 填报状态
      auditList: ["全部", "未审核", "已审核"], // 审核状态
      orgTree: [], // 树
      // 查询参数
      queryParam: {
        submitStatus: "", // 填报状态 1 未填报 2 已填报
        auditStatus: "", // 审核状态 1 未审核 2 已审核
      },
      visible: false, // 填写申报弹窗
      confirmLoading: false, // 填写申报弹窗确定按钮loading
      detail: {}, // 上方详情数据
      targetManagementIdList: [], // 点击时左侧树节点id集合
      targetDeclarationRecordId: "", // 填报id
      id: "", // 指标id
      entryInfo: this.$storejs.get("enterInfo"), // 存储的申报信息
      uploadVisible: false,
      form: {},
      searchTarget: "",
      filterText: '',
      currentNode: null,
      targetTree: [],
      elTreeProps: {
        children: 'childs',
        label: 'target'
      },
      defaultProps: {
        children: "children",
        label: "title",
      },
      treeLoading: true,
      fullscreenLoading: false,
      treeHeight: 300,
      previewLoading: false,
      previewVisible: false, // 预览word pic
      timeInterval: null,
      taskId: ''
    };
  },
  mounted() {
    // console.log(this.entryInfo);
    this.getTree();
    this.getDeclarationInfoDetail();
    this.getTargetDeclarationRecordList();
    // 获取树的可见高度
    this.loadTreeHeight()
    window.addEventListener('resize', () => {
      this.loadTreeHeight()
    })
  },
  watch: {
    searchTarget(val) {
      if (!val) {
        this.$refs.tree.filter(val);
      }
    },
    filterText(val) {
      this.$refs.treeRef.filter(val);
    }
  },
  deactivated () {
    this.clearInterval()
  },
  beforeDestroy () {
    this.clearInterval()
  },
  methods: {
    loadTreeHeight() {
      this.treeHeight = document.body.clientHeight - 426
    },
    handleSearch() {
      this.$refs.tree.filter(this.searchTarget);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    getIdsById(id, tree) {
      const node = this.findNodeById(id, tree); // 根据id查找对应的节点
      if (node) {
        return this.getAllIds(node); // 返回当前节点下的所有子节点id集合
      }
      return [];
    },

    findNodeById(id, tree) {
      for (const node of tree) {
        // 遍历数组中的每一个节点
        if (node.title.includes(id)) {
          return node; // 如果当前节点的id与指定id匹配，则返回当前节点
        }
        if (node.children) {
          // 如果当前节点有子节点
          const result = this.findNodeById(id, node.children); // 递归查找子节点
          if (result) {
            return result; // 如果找到了匹配的节点，则返回该节点
          }
        }
      }
      return null; // 如果未找到匹配的节点，则返回null
    },
    getAllIds(node) {
      const ids = [node]; // 将当前节点的id添加到集合中
      // if (node.children) {
      //   // 如果当前节点有子节点
      //   for (const child of node.children) {
      //     // 遍历所有子节点
      //     ids.push(...this.getAllIds(child)) // 递归获取子节点的id并添加到集合中
      //   }
      // }
      return ids;
    },

    // 上方详情数据
    getDeclarationInfoDetail() {
      // console.log(this.$route.query.info);
      getDeclarationInfoDetail(this.entryInfo.declarationInfoId).then((res) => {
        // console.log(res);
        this.detail = res.data;
      });
    },
    // 指标列表
    getTargetDeclarationRecordList() {
      this.indexLoading = true
      getTargetDeclarationRecordList({
        target: this.searchValue,
        size: 9999,
        current: 1,
        targetManagementIdList: this.targetManagementIdList, // 左侧树节点
        declarationInfoId: this.entryInfo.declarationInfoId,
      }).then((res) => {
        // console.log("res===", res);
        this.dataList = res.data.records;
        this.dataListCopy = res.data.records;
        this.filterList();
      }).finally(res => {
        this.indexLoading = false
      })
    },
    // 树
    getTree() {
      this.treeSpinning = true
      getTree({
        target: this.searchValue,
        socialOrganizationTypeId: this.entryInfo.socialOrganizationTypeId || "",
      }).then((res) => {
        // console.log("res==", res);
        this.orgTree = res.data || []
        // const ass = (data) => {
        //   let item = [];
        //   data.map((list, i) => {
        //     let newData = {};
        //     newData.key = list.id;
        //     newData.parentId = list.parentId;
        //     newData.title = list.target;
        //     newData.cj = list.cj;
        //     newData.children = list.childs ? ass(list.childs) : []; //如果还有子集，就再次调用自己
        //     item.push(newData);
        //   });
        //   return item;
        // };
        // this.orgTree = ass(this.orgTree);
        // this.orgTree = this.getLeaf(this.orgTree);
        this.showTree = true;
      }).finally(e => {
        this.treeSpinning = false
      })
    },
    filterNode1(value, data) {
      if (!value) return true;
      return data.target.indexOf(value) !== -1;
    },
    // 树
    getTargetTree() {
      getTree({
        target: "",
        socialOrganizationTypeId: this.entryInfo.socialOrganizationTypeId || "",
      }).then((res) => {
        // console.log("res==", res);
        this.targetTree = res.data;
        // this.$nextTick(() => {
        //   this.$refs.tree.setCheckedKeys([]);
        // });
        this.treeLoading = false;
        const ass = (data) => {
          let item = [];
          data.map((list, i) => {
            let newData = {};
            newData.key = list.id;
            newData.parentId = list.parentId;
            newData.title = list.target;
            newData.cj = list.cj;
            newData.children = list.childs ? ass(list.childs) : []; //如果还有子集，就再次调用自己
            item.push(newData);
          });
          return item;
        };
        this.targetTree = ass(this.targetTree);
        // this.filterNode("", this.targetTree);
      });
    },
    getLeaf(data) {
      for (let i = 0, len = data.length; i < len; i++) {
        if (data[i].cj === 4) {
          data[i].isLeaf = true;
        } else if (data[i].children && data[i].children.length > 0) {
          data[i].disabled = true;
          data[i].children = this.getLeaf(data[i].children);
        }
      }
      return data;
    },
    getCheckedable(data) {
      for (let i = 0, len = data.length; i < len; i++) {
        if (data[i].targetDeclarationRecordId) {
          data[i].disabled = false;
        } else if (data[i].children && data[i].children.length > 0) {
          data[i].disabled = true;
          data[i].children = this.getCheckedable(data[i].children);
        } else {
          data[i].disabled = true;
        }
      }
      return data;
    },
    // 下载合并文件
    handleUpload() {
      this.getTargetTree();
      this.searchTarget = "";
      this.uploadVisible = true;
      this.filterNode("", this.targetTree);
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([]);
      });
    },
    // 搜索关键字
    onChange() {
      this.getTree();
      this.getTargetDeclarationRecordList();
    },
    // 搜索关键字
    changeTarget() {
      // this.filterTree(this.targetTree);
      getTree({
        target: this.searchTarget,
        socialOrganizationTypeId: this.entryInfo.socialOrganizationTypeId || "",
      }).then((res) => {
        // console.log("res==", res);
        this.targetTree = res.data;
        const ass = (data) => {
          let item = [];
          data.map((list, i) => {
            let newData = {};
            newData.key = list.id;
            newData.parentId = list.parentId;
            newData.title = list.target;
            newData.children = list.childs ? ass(list.childs) : []; //如果还有子集，就再次调用自己
            item.push(newData);
          });
          return item;
        };
        this.targetTree = ass(this.targetTree);

        console.log(this.targetTree);
      });
    },
    filterList() {
      if (
        this.queryParam.submitStatus === "" &&
        this.queryParam.auditStatus === ""
      ) {
        this.dataListCopy = this.dataList;
      } else if (
        this.queryParam.submitStatus === "" &&
        this.queryParam.auditStatus === 1
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) => item.scoreZhidao === null && item.targetDeclarationRecordId
        );
      } else if (
        this.queryParam.submitStatus === "" &&
        this.queryParam.auditStatus === 2
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) => item.scoreZhidao && item.targetDeclarationRecordId
        );
      } else if (
        this.queryParam.submitStatus === 1 &&
        this.queryParam.auditStatus === ""
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) => item.submitStatus === 1
        );
      } else if (
        this.queryParam.submitStatus === 1 &&
        this.queryParam.auditStatus === 1
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) =>
            item.submitStatus === 1 &&
            item.scoreZhidao === null &&
            item.targetDeclarationRecordId
        );
      } else if (
        this.queryParam.submitStatus === 1 &&
        this.queryParam.auditStatus === 2
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) =>
            item.submitStatus === 1 &&
            item.scoreZhidao &&
            item.targetDeclarationRecordId
        );
      } else if (
        this.queryParam.submitStatus === 2 &&
        this.queryParam.auditStatus === ""
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) => item.submitStatus === 2
        );
      } else if (
        this.queryParam.submitStatus === 2 &&
        this.queryParam.auditStatus === 1
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) =>
            item.submitStatus === 2 &&
            item.scoreZhidao === null &&
            item.targetDeclarationRecordId
        );
      } else if (
        this.queryParam.submitStatus === 2 &&
        this.queryParam.auditStatus === 2
      ) {
        this.dataListCopy = this.dataList.filter(
          (item) =>
            item.submitStatus === 2 &&
            item.scoreZhidao &&
            item.targetDeclarationRecordId
        );
      }
    },
    handleChange(data, index) {
      // console.log(data);
      this.current = index;
      switch (index) {
        case 0:
          this.queryParam.submitStatus = "";
          break;
        case 1:
          this.queryParam.submitStatus = 1;
          break;
        case 2:
          this.queryParam.submitStatus = 2;
          break;
      }
      // this.getTargetDeclarationRecordList();
      this.filterList();
    },
    handleChange1(data, index) {
      // console.log(data);
      this.current1 = index;
      switch (index) {
        case 0:
          this.queryParam.auditStatus = "";
          break;
        case 1:
          this.queryParam.auditStatus = 1;
          break;
        case 2:
          this.queryParam.auditStatus = 2;
          break;
      }
      // this.getTargetDeclarationRecordList();
      this.filterList();
    },
    // 左侧树点击
    confirmSelect(data, treeNode) {
      if (data.cj != 4) {
        this.$refs.treeRef.setCurrentKey(null)
        this.currentNode = null
        this.targetManagementIdList = ''
        this.getTargetDeclarationRecordList()
        return
      }

      let ids = ''
      if (this.currentNode && this.currentNode.target === data.target) {
        treeNode.checked = !treeNode.checked
      } else {
        treeNode.checked = true
      }
      if (treeNode.checked) {
        // 选中
        this.currentNode = data
        ids = data.id
      } else {
        // 取消选中
        this.$refs.treeRef.setCurrentKey(null)
        this.currentNode = null
      }

      this.targetManagementIdList = ids
      this.getTargetDeclarationRecordList()
    },
    // 左侧树点击
    confirmSelect_back(selectedKeys, e) {
      // console.log(selectedKeys);
      this.targetManagementIdList = selectedKeys;
      this.getTargetDeclarationRecordList();
    },
    // 填写申报内容取消
    handleCancel() {
      this.visible = false;
    },
    // 填写申报内容确定
    handleOk() {

      if (
        this.$refs.writeModel.queryParam.selfScore !== 0 &&
        !this.$refs.writeModel.queryParam.selfScore
      ) {
        return this.$message.error("自评得分不可为空");
      } 

      // if (
      //   !this.$refs.writeModel.fileList.length &&
      //   !this.$refs.writeModel.files.length
      // ) {
      //   return this.$message.error("填报文件不能为空");
      // }

      this.confirmLoading = true;
      // 如果有填报id说明之前填写过 走编辑流程 否则走新增流程
      if (this.targetDeclarationRecordId) {
        let files = [];
        if (
          this.$refs.writeModel.fileList.length &&
          this.$refs.writeModel.files.length
        ) {
          files = this.$refs.writeModel.files.concat(
            this.$refs.writeModel.fileListBefore
          );
        } else if (
          this.$refs.writeModel.fileList.length &&
          !this.$refs.writeModel.files.length
        ) {
          files = this.$refs.writeModel.fileListBefore;
        } else if (
          !this.$refs.writeModel.fileList.length &&
          this.$refs.writeModel.files.length
        ) {
          files = this.$refs.writeModel.files;
        }
        // 编辑
        editDeclare({
          id: this.targetDeclarationRecordId, // 填报id
          targetManagementId: this.id, // 指标id
          declarationInfoId: this.entryInfo.declarationInfoId, // 申报id
          selfScore: this.$refs.writeModel.queryParam.selfScore, // 自评得分
          comment: this.$refs.writeModel.queryParam.comment, // 备注说明
          files, // 文件列表
          // files: this.$refs.writeModel.files.concat(
          //   this.$refs.writeModel.fileList,
          //   this.$refs.writeModel.fileListBefore
          // ), // 文件列表
        })
          .then((res) => {
            this.confirmLoading = false;
            // console.log("editRes===", res);
            this.$message.success("修改成功");
            this.visible = false;
            this.getTargetDeclarationRecordList();
          })
          .catch((err) => {
            this.confirmLoading = false;
          });
      } else {
        // 新增
        submitDeclare({
          targetManagementId: this.id,
          declarationInfoId: this.entryInfo.declarationInfoId,
          selfScore: this.$refs.writeModel.queryParam.selfScore,
          comment: this.$refs.writeModel.queryParam.comment,
          files: this.$refs.writeModel.files || [],
        })
          .then((res) => {
            // console.log("res===", res);
            this.confirmLoading = false;
            this.$message.success("填报成功");
            this.visible = false;
            this.getTargetDeclarationRecordList();
          })
          .catch((err) => {
            this.confirmLoading = false;
          });
      }
      
    },
    // 填写
    toWrite(data) {
      // 左边树同步且高亮
      let offsetTop = this.$el.querySelector('#elTreeId' + data.id)?.offsetTop || 0
      this.$refs.treeBoxRef.scrollTop = offsetTop - 250
      this.$refs.treeRef.setCurrentKey(data.id)


      this.status = this.$storejs.get("declarationSystem").status;
      this.visible = true;
      this.id = data.id; // 指标id
      this.targetDeclarationRecordId = data.targetDeclarationRecordId; // 填报记录id
      this.$refs.writeModel.files = [];
      this.$refs.writeModel.form.resetFields();
      // 指标详情(说明 被查资料)
      getTargetManagement(data.id).then((res) => {
        // console.log(res);
        this.$refs.writeModel.targetManagement = res.data;
      });
      if (data.targetDeclarationRecordId) {
        // 获取合并后的文件
        getFiles(data.targetDeclarationRecordId).then((res) => {
          this.$refs.writeModel.fileList = [];
          // console.log("files===", res);
          if (res.data) this.$refs.writeModel.fileList.push(res.data);
          // console.log('fileList===',this.$refs.writeModel.fileList)
        });
        // 获取历史文件列表
        getFilesBefore(data.targetDeclarationRecordId).then((res) => {
          // console.log("filesBefore===", res);
          this.$refs.writeModel.fileListBefore = res.data;
        });
        // 获取填报记录详情
        getTargetDeclarationRecordDetail(data.targetDeclarationRecordId).then(
          (res) => {
            // console.log("writeInfo====", res);
            this.$refs.writeModel.queryParam.selfScore =
              (res.data && res.data.selfScore) || "";
            this.$refs.writeModel.queryParam.comment =
              (res.data && res.data.comment) || "";
            this.$refs.writeModel.replyList =
              (res.data && res.data.replyList) || [];
            this.$refs.writeModel.scoreList = (res.data && res.data.scoreList) || [];
          }
        );
      } else {
        this.$refs.writeModel.queryParam.selfScore = "";
        this.$refs.writeModel.queryParam.comment = "";
        this.$refs.writeModel.fileList = [];
        this.$refs.writeModel.replyList = [];
      }
    },
    getAllFile() {
      // console.log(this.$refs.tree.getCheckedKeys());
      if (!this.$refs.tree.getCheckedKeys().length)
        return this.$message.error("请勾选需要导出的指标");
      //loading
      if (this.confirmLoading){
        console.log("loading:"+this.confirmLoading)
        return this.$message.error("请勿频繁点击");
      }
      this.fullScreenLoading(true)
      let thad=this;
      thad.confirmLoading = true;
      getAllFile({
        id: this.entryInfo.declarationInfoId,
        targetManagementIds: this.$refs.tree.getCheckedKeys(),
      }).then((res) => {
        this.taskId = res.data.taskId || ''
        thad.startLoadFileStatus()
      }).catch(err => {
        thad.confirmLoading = false;
      }).finally(res => {
        // thad.confirmLoading = false;
        // this.fullScreenLoading(false)
      })
    },
    startLoadFileStatus() {
      window.clearInterval(this.timeInterval)
      this.timeInterval = setInterval(() => {
        this.loadTaskFileStatus()
      }, 3000)
    },
    clearInterval() {
      window.clearInterval(this.timeInterval)
    },
    // 轮询加载合并文件状态
    loadTaskFileStatus() {
      getTaskFileStatus(this.taskId).then(res => {
        let data = res.data || {}
        if (data.status == 1) {
          this.clearInterval()
          let fileUrl = fileApi + data.sysProjectFile?.url || ''
          axios.get(fileUrl, {
            responseType: "blob", // 注意返回数据类型
          }).then((res1) => {
            this.confirmLoading = false
            this.fullScreenLoading(false)
            const url = window.URL.createObjectURL(res1.data);
            const linkElement = document.createElement("a"); // 创建点击下载的元素
            linkElement.setAttribute("href", url);
            linkElement.setAttribute("downLoad", data.sysProjectFile.original);
            linkElement.click();
            this.$message.success("导出成功");
          })
        }
      }).catch(e => {
        this.clearInterval()
        this.confirmLoading = false
        this.fullScreenLoading(false)
      })
    },
    //index.js  创建自定义方法
    fullScreenLoading(visible) {
      if (visible) {
        const fragment = new DocumentFragment();
        const loadDom = document.createElement("div");
        loadDom.setAttribute("class", "my-spin");
        const loadChild = document.createElement("div");
        loadChild.setAttribute("class", "ant-spin-container ant-spin-blur");
        const spinSpan = document.createElement("span");
        spinSpan.setAttribute("class", "ant-spin-dot ant-spin-dot-spin");
        for (let i = 0; i < 4; i++) {
          const liDom = document.createElement("li");
          liDom.setAttribute("class", "ant-spin-dot-item");
          spinSpan.appendChild(liDom);
        }
        loadDom.appendChild(spinSpan);
        loadDom.appendChild(loadChild);
        fragment.appendChild(loadDom);
        document.body.appendChild(fragment);
      } else {
        const loading = document.querySelector(".my-spin");
        if (loading) {
          document.body.removeChild(loading);
        }
      }
    },
    // 预览文件
    handlePreview() {
      this.previewVisible = true
      this.previewLoading = true
      // 服务器本地访问
      let params = {
        id: this.detail.id
      }
      previewFile(params).then(res => {
        console.log('res', res);
        if (res.code == 200) {
          let fileUrl = fileApi + res.data.url
          // fileUrl = 'https://wxdengji.oss-cn-hangzhou.aliyuncs.com/2024-05-12/36ee8018e46d4579ad319b36495f8d03.docx'
          axios({
            method: "get",
            responseType: "blob", // 设置响应文件格式
            url: fileUrl,
          }).then(({ data }) => {
            docx.renderAsync(data, this.$refs.file) // 渲染到页面预览
          })
          .catch(e => {
            this.$refs.file.innerHTML = '<div style="color: red;text-align: center; opacity: .8;">加载文件异常</div>'
          })
          .finally(() => {
            this.previewLoading = false
          })
        }
      }).catch(e => {
        this.previewLoading = false
      })
    },
  },
};
</script>
<style lang="less">
.my-spin{
  width:100%;
  height:100%;
  z-index:3000;
  display:flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top:0;
  background: rgba(0, 0, 0, 0.4);
  >div{
    position: absolute;
    width:100%;
    height: 100%;
  }
}
.custom-tree .el-tree-node__content:hover {
  background-color: #f0f7ff;
  border-radius: 5px;
}
.custom-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  background-color: #ccddf2 !important;
  border-radius: 5px;
}
</style>
<style lang="less" scoped>
.tbzt {
        position: absolute;
        top: 0;
        left: 0;
        width: 138px;
        height: 25px;
        line-height: 25px;
        padding-left: 12px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.85);
        border-bottom-right-radius: 24px;
        &.yes {
          background: #21C87F;
        }
        &.no {
          background: #FF5454;
        }
      }
.container {
  font-family: Microsoft YaHei;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  .table-page-search-wrapper {
    background: #f0f0f0;
    padding: 15px;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    position: relative;
    span {
      font-size: 14px;
      font-weight: normal;
      margin-left: 17px;
      color: rgba(153, 153, 153, 0.85);
    }
    .preview-btn {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .info {
    display: flex;
    margin-top: 20px;
    .info_left {
      display: flex;
      // width: 70%;
      flex: 3;
      justify-content: space-between;
      div:last-child {
        display: flex;
        flex-direction: column;
        .info_left_upload {
          color: #0084fe;
          cursor: pointer;
        }
      }
    }
    .info_right {
      flex: 2;
      margin-left: 5.3%;
      .info_right_score_container {
        margin-top: 19px;
        display: flex;
        .info_right_score {
          flex: 1;
          margin-right: 16px;
          padding: 15px 0;
          text-align: center;
          background: #e5ecff;
          display: flex;
          flex-direction: column;
          font-size: 14px;
          // width: 100px;
          border-radius: 4px;
          span {
            line-height: 11px;
          }
          span:last-child {
            margin-top: 9px;
            line-height: 12px;
          }
        }
      }
    }
  }
  .content-box {
    height: calc(100vh - 323px);
    margin-top: 16px; 
    display: flex;
  }
  .left-tree {
    background: #fff;
    width: 19%;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .spinBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  .content {
    flex: 1;
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    .status_container {
      display: flex;
      padding: 18px 10px 18px 37px;
      align-items: center;
      background: #fff;
      justify-content: space-between;
      .status {
        display: flex;
        align-items: center;
        .status_list {
          display: flex;
          margin-left: 20px;
          & > div {
            border-radius: 4px;
            margin-right: 10px;
            position: relative;
            background: #fff;
            border: 1px solid #d9d9d9;
            width: 80px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            cursor: pointer;
            img {
              position: absolute;
              bottom: 0;
              right: 0;
              width: 17px;
              height: 17px;
            }
          }
          .active_status {
            border: 1px solid #0084fe;
            background: #edf3ff;
            box-shadow: 0px 0px 8px 0px rgba(13, 13, 13, 0.05);
            color: #0084fe;
          }
        }
      }
    }
    .audit_list {
      overflow: auto;
      position: relative;
      flex: 1;
      .index-item {
        background: #fff;
        position: relative;
        margin-top: 15px;
        padding: 24px 0 24px 11.1%;
        display: flex;
        align-items: center;
        box-shadow: 0px 0px 8px 0px rgba(13, 13, 13, 0.05);
        .item {
          display: flex;
          flex-direction: column;
          color: #999;
          &:nth-child(n + 2) {
            margin-left: 13%;
          }
          span:last-child {
            margin-top: 13px;
            color: #000;
          }
        }
        .approve_reject {
          margin-left: 20%;
          width: 92px;
          height: 70px;
        }
        .write {
          margin-left: 20%;
        }
        .status {
          position: absolute;
          top: 0;
          left: 0;
          div {
            position: absolute;
            // left: 5px;
            // top: 2px;
          }
          // img {
          //   width: 138px;
          //   height: 25px;
          // }
        }
        .points {
          color: rgba(255, 255, 255, 0.85);
          font-size: 12px;
          height: 24px;
          line-height: 24px;
          padding: 0 10px;
          border-radius: 2px;
          position: absolute;
          right: 0;
          top: 0;
          background-color: red;
        }
      }
    }
  }
}
::v-deep {
  .ant-input {
    border-radius: 19px;
  }
  .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background: #1890ff;
    color: #fff;
    .selected {
      color: #fff !important;
    }
  }
  .ant-slider-rail {
    background: #eff0f2 !important;
  }
  .ant-slider-disabled .ant-slider-track {
    background: #4674f6 !important;
  }
  .ant-slider-disabled .ant-slider-handle {
    border: 3px solid #ffffff !important;
    box-shadow: 0px 3px 8px 0px rgba(38, 65, 153, 0.25) !important;
    background: #4674f6 !important;
  }
  .ant-form-item {
    margin-bottom: 0;
  }
  .el-button {
    background: #1890ff !important;
    color: #fff !important;
    border-radius: 0 !important;
  }
}
.no_data {
  color: #666;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
}
.tree_container {
  border: 1px solid #e8e8e8;
  height: 500px;
  overflow-y: scroll;
}
.search {
  ::v-deep .ant-input {
    border-radius: 0;
  }
}

::v-deep .docx-wrapper {
  padding: none;
  background: none;
}

::v-deep .docx {
  width: auto !important;
  padding: 0px !important;
  box-shadow: none !important;
}
::v-deep .ant-input-number-handler-wrap {
  display: none;
}
.docx_container {
  position: relative;
  min-height: 500px;
  .spinBox {
    display: flex;
    justify-content: center;
    background: #fff;
    width: 100%;
    height: 100%;
    padding-top: 150px;
  }
}
</style>
